<template>
    <div class="CarouselMap text">
        <div class="big">
            <!--头部—优惠券列表-->
            <div class="top">
                <div class="Leftgreen"></div>
                <div class="other">
                    &nbsp;轮播图
                    <div class="Topbutton">
                        <el-button class="el-button" @click="refresh">
                            <i class="el-icon-refresh"></i>
                            刷新
                        </el-button>
                        <el-button class="el-button" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回
                        </el-button>
                    </div>
                </div>
            </div>
            <!--筛选查询-->
            <div class="search">
                &nbsp;&nbsp;
                <i class="el-icon-search"></i>
                <span class="text2 line">&nbsp;筛选查询</span>
                <el-button class="el-button searchbutton">
                    查询结果
                </el-button>
                <div class="searchInterior text2">
                    <el-form ref="form" :model="form" label-width="90px" @keyup.enter.native="sift">
                        <el-form-item label="名称:" class="item" >
                            <el-input v-model="form.name" placeholder="请输入轮播图名称" @click.native="prompt"></el-input>
                        </el-form-item>
                        <el-form-item label="位置:" class="item" >
                            <el-input v-model="form.position" placeholder="请输入轮播图位置" @click.native="prompt"></el-input>
                        </el-form-item>
                        <el-form-item label="上线/下线" class="item" >
                            <el-select v-model="form.state" placeholder="全部" @click.native="prompt">
                                <el-option label="上线" value="2"></el-option>
                                <el-option label="下线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--数据列表—头-->
            <div class="data">
                &nbsp;&nbsp;
                <i class="el-icon-document"></i>
                <span class="text2 line">&nbsp;数据列表</span>
                <el-button disabled class="databutton">排序方式<i class="el-icon-caret-bottom"></i></el-button><!--下拉菜单-->
                <el-button disabled class="databutton">显示条数<i class="el-icon-caret-bottom"></i></el-button>
                <el-button class="databutton">
                    <router-link to="/addCoupon" class="a2">添加轮播图</router-link>
                </el-button>
            </div>
            <!--数据列表—表格-->
            <div class="tableCarouselList">
                <el-table class="el-table"
                          :header-cell-style="{background:'#f6f7f9'}"
                          :data="tableCarouselList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                          border style="width: 1095px">
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column prop="serialNumber" align="center" label="编号" sortable></el-table-column>
                    <el-table-column prop="carouselName" align="center" label="名称"></el-table-column>
                    <el-table-column prop="carouselPosition" align="center" label="位置"></el-table-column>
                    <el-table-column align="center" label="图片" sortable></el-table-column>
                    <el-table-column align="center" label="时间" sortable>
                        <el-table-column prop="satrtTime" align="center" label="开始时间"></el-table-column>
                        <el-table-column prop="expireDate" align="center" label="到期时间"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="display" align="center" label="上线/下线" sortable>
                        <template slot-scope="scope">
                            <el-switch class="switch"
                                       v-model="scope.row.couponsOnline"
                                       active-color="#EFEFEF"
                                       inactive-color="#1ABC9C"
                                       :active-value="3"
                                       :inactive-value="2"
                                       :plain="true"
                                       @change="changeSwitch(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="numberOfClicks" align="center" label="点击次数" sortable></el-table-column>
                    <el-table-column prop="numberOfCarousels" align="center" label="轮播次数" sortable></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button type="text" size="small" >置顶</el-button>
                            <el-button type="text" size="small" @click="deleteClick(scope.row.couponId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--尾部—分页部分-->
            <div class="pagination">
                <div class="paginationLeft">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button class="FYqd">确定</el-button>
                </div>
                <div style="margin-top:.2rem;margin-left: .2rem;">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[8,6,4,2]"
                                   :page-size="pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableCarouselList.length" style="padding: 8px 0px 0px 375px;">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CarouselMapList",
        data(){
            return{
                form:{
                    //筛选查询
                    name:'',
                    position:'',
                    state:'',
                    //表数据
                    serialNumber:'',
                    carouselName:'',
                    carouselPosition:'',
                    satrtTime:'',
                    expireDate:'',
                    display:'',
                    numberOfClicks:'',
                    numberOfCarousels:''
                },
                // 定义表数组集合
                tableCarouselList:[],
                //分页
                currentPage: 1,
                currentIndex: '',
                pagesize: 8,
            }
        },
        methods:{
            //刷新按钮方法
            refresh(){
                window.location.reload();
            },
            //返回按钮方法
            back(){
                this.$router.back()
            },
            //渲染后台轮播图列表
            async getCarouselMapListAll(){
                const {data:res} =await this.$http.post('/CarouselMap/getCarouselMapListAll')
                this.tableCarouselList = res;
            },
            //分页
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage= val
            },
        },
        created() {
            //调用渲染后台轮播图列表方法
            this.getCarouselMapListAll();
        }
    }
</script>

<style scoped>
    .CarouselMap{
        width: 100%;
        height: 100%;
    }
    .big{
        background-color: #F6F7F9;
        height: 100%;
        width: 100%;
    }
    .top{
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        height: 40px;
        line-height: 40px;
    }
    .Leftgreen{
        background-color: #1ABC9C;
        width: 4px;
        height: 19px;
        float: left;
        margin-top: 11px;
    }
    .text{
        color: #978f96;
        font-family: Arial;
    }
    .text2{
        color: #5C6573;
    }
    .Topbutton{
        float: right;
        margin-right: 40px;
        margin-top: 1.5px;
    }
    .el-button{
        margin-right: 15px;
        height: 30px;
        Padding-top:8px
    }
    .search{
        margin-top: 20px;
        width: 1093px;
        height: 100px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .searchInterior{
        background-color: white;
        height: 60px;
        border: 1px #d5d5d5 solid;
    }
    .searchbutton{
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    .item{
        width:300px;
        float: left;
        margin: 10px 10px 0px 10px;
    }
    .data{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .databutton{
        float: right;
        margin-right: 15px;
        margin-top: 5px;
    }
    .el-table{
        width: 400px;
    }
    .tableCarouselList{
        border: 1px #d5d5d5 solid;
        width: 1093px;
    }
    .pagination{
        height: 49px;
        width: 1093px;
        background-color: #FFF;
        border: 1px #d5d5d5 solid;
    }
    .paginationLeft{
        float: left;
        padding: 10px 0px 0px 40px;
    }
    .FYqd{
        position: relative;
        left: 770px;
    }
    .title{
        height: 500px;
    }
    .ckInput{
        width: 180px;
    }
    .ckInputL{
        width: 480px;
    }
    .a2{
        color: #5C6573;
        text-decoration: none;
    }
    .actionSearch{
        background-color: #409EFF;
        color: #fff;
    }
    .actionSearch:hover{
        background-color: #2e73b9;
        color: white;
    }
</style>